<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <div class="c-content">
        <p class="c-title">当前城市</p>
        <div class="content">
          <span class="btn">北京</span>
        </div>
      </div>
      <div class="h-content">
        <p class="c-title">热门城市</p>
        <div class="content">
          <span class="btn" v-for="item of hotCities" :key="item.id">{{item.name}}</span>
        </div>
      </div>
      <div class="a-content">
        <div v-for="(item,index) of cities" :key="index">
          <p class="c-title" :ref="index">{{index}}</p>
          <div v-for="item of item" :key="item.id">
            <p class="c-item">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "CityList",
  props: ["cities", "hotCities", "letter"],
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {});
    });
  },
  watch: {
    letter() {
      var element = this.$refs[this.letter][0];
      this.scroll.scrollToElement(element);
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 1000px;
  //   overflow: hidden;
  position: relative;
  margin-top: 200px;
}
.c-title {
  font-size: 24px;
  background: #eee;
  padding: 20px;
}
.content {
  padding: 20px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 40px, 40px;
  grid-column-gap: 30px;
  grid-row-gap: 20px;
}
.btn {
  line-height: 30px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 20px;
  text-align: center;
}
.c-item {
  line-height: 70px;
  padding-left: 30px;
  border-bottom: 1px solid #eee;
}
</style>
